<!DOCTYPE html>
<html lang="zh-cn">
    <head><meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'><meta name='description' content='欢迎来到 JavaScrip 极速入坟 门 首先，先把廖雪峰前四章看完 （就是到 面向对象编程 那一章
 JavaScript教程
 接着去看一下这个：
 理解 JavaScript 的 Proto 和 Prototype
 然后就可以开始整活了：
this
var obj = { foo: function () { console.log(this.bar) }, bar: 1 }; var foo = obj.foo; var bar = 2; obj.foo() // 输出啥？ foo() // 输出啥？ array
var bar = [1,2,3] function foo (list) { list.push(4); } foo(bar); // 现在 bar 里面是啥？ obj
function foo(buf){ this.buf = buf; } var bar = new Uint8Array([1,2,3]); var f = new foo(bar); bar[0] = 9; // 现在 f.'><title>JavaScript 极速入门</title>

<link rel='canonical' href='https://blog.frostmiku.com/archives/13/'>

<link rel="stylesheet" href="/scss/style.min.css"><meta property='og:title' content='JavaScript 极速入门'>
<meta property='og:description' content='欢迎来到 JavaScrip 极速入坟 门 首先，先把廖雪峰前四章看完 （就是到 面向对象编程 那一章
 JavaScript教程
 接着去看一下这个：
 理解 JavaScript 的 Proto 和 Prototype
 然后就可以开始整活了：
this
var obj = { foo: function () { console.log(this.bar) }, bar: 1 }; var foo = obj.foo; var bar = 2; obj.foo() // 输出啥？ foo() // 输出啥？ array
var bar = [1,2,3] function foo (list) { list.push(4); } foo(bar); // 现在 bar 里面是啥？ obj
function foo(buf){ this.buf = buf; } var bar = new Uint8Array([1,2,3]); var f = new foo(bar); bar[0] = 9; // 现在 f.'>
<meta property='og:url' content='https://blog.frostmiku.com/archives/13/'>
<meta property='og:site_name' content='StarWhisper'>
<meta property='og:type' content='article'><meta property='article:section' content='Post' /><meta property='article:tag' content='JavaScript' /><meta property='article:published_time' content='2019-11-22T21:55:00&#43;08:00'/><meta property='article:modified_time' content='2019-11-22T21:55:00&#43;08:00'/>
<meta name="twitter:site" content="@iceMiKu">
    <meta name="twitter:creator" content="@iceMiKu"><meta name="twitter:title" content="JavaScript 极速入门">
<meta name="twitter:description" content="欢迎来到 JavaScrip 极速入坟 门 首先，先把廖雪峰前四章看完 （就是到 面向对象编程 那一章
 JavaScript教程
 接着去看一下这个：
 理解 JavaScript 的 Proto 和 Prototype
 然后就可以开始整活了：
this
var obj = { foo: function () { console.log(this.bar) }, bar: 1 }; var foo = obj.foo; var bar = 2; obj.foo() // 输出啥？ foo() // 输出啥？ array
var bar = [1,2,3] function foo (list) { list.push(4); } foo(bar); // 现在 bar 里面是啥？ obj
function foo(buf){ this.buf = buf; } var bar = new Uint8Array([1,2,3]); var f = new foo(bar); bar[0] = 9; // 现在 f.">
    <link rel="shortcut icon" href="/favicon.ico" />
<style>
    :root {
        --article-font-family: "Noto Serif SC", var(--base-font-family);
    }
</style>

<script>
		(function () {
		    const customFont = document.createElement('link');
		    customFont.href = "<https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap>";
		
		    customFont.type = "text/css";
		    customFont.rel = "stylesheet";
		
		    document.head.appendChild(customFont);
		}());
</script>
    </head>
    <body class="
    article-page 
">
    <script>
        (function() {
            const colorSchemeKey = 'StackColorScheme';
            if(!localStorage.getItem(colorSchemeKey)){
                localStorage.setItem(colorSchemeKey, "auto");
            }
        })();
    </script><script>
    (function() {
        const colorSchemeKey = 'StackColorScheme';
        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;

        if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
            

            document.documentElement.dataset.scheme = 'dark';
        } else {
            document.documentElement.dataset.scheme = 'light';
        }
    })();
</script>
<div class="container main-container flex 
    
        on-phone--column extended
    
">
    
        <aside class="sidebar left-sidebar sticky">
    <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="切换菜单">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>

    <header class="site-info">
        
            <figure class="site-avatar">
                
                    
                    
                    
                        
                        <img src="/img/avatar_hucb4cf7c6dfd74976b01240ca1952b6cf_46859_300x0_resize_box_3.png" width="300"
                            height="254" class="site-logo" loading="lazy" alt="Avatar">
                    
                

                
                    <span class="emoji">🤡</span>
                
            </figure>
        
        <h1 class="site-name"><a href="https://blog.frostmiku.com">StarWhisper</a></h1>
        <h2 class="site-description">In Pursuit of Absolute Simplicity.</h2>
    </header>

    <ol class="menu" id="main-menu">
        
        
        

        <li >
            <a href='/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="5 12 3 12 12 3 21 12 19 12" />
  <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
  <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg>



                
                <span>Home</span>
            </a>
        </li>
        
        

        <li >
            <a href='/about/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="7" r="4" />
  <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>



                
                <span>关于</span>
            </a>
        </li>
        
        

        <li >
            <a href='/archives/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-archive" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <rect x="3" y="4" width="18" height="4" rx="2" />
  <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
  <line x1="10" y1="12" x2="14" y2="12" />
</svg>



                
                <span>归档</span>
            </a>
        </li>
        
        

        <li >
            <a href='/friends/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
  <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
</svg>



                
                <span>友链</span>
            </a>
        </li>
        
        

        <li >
            <a href='/index.xml'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rss" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="5" cy="19" r="1" />
  <path d="M4 4a16 16 0 0 1 16 16" />
  <path d="M4 11a9 9 0 0 1 9 9" />
</svg>



                
                <span>RSS</span>
            </a>
        </li>
        
        

        <li >
            <a href='/search/'>
                
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="10" cy="10" r="7" />
  <line x1="21" y1="21" x2="15" y2="15" />
</svg>



                
                <span>Search</span>
            </a>
        </li>
        

        
            <li id="dark-mode-toggle">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="8" cy="12" r="2" />
  <rect x="2" y="6" width="20" height="12" rx="6" />
</svg>



                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toggle-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="16" cy="12" r="2" />
  <rect x="2" y="6" width="20" height="12" rx="6" />
</svg>



                <span>暗色模式</span>
            </li>
        
    </ol>
</aside>

    
<main class="main full-width">
    <article class="main-article">
    <header class="article-header">

    <div class="article-details">
    
    <header class="article-category">
        
            <a href="/categories/%E6%95%B4%E6%B4%BB/" style="background-color: #ff945f; color: #fff;">
                整活
            </a>
        
    </header>
    

    <h2 class="article-title">
        <a href="/archives/13/">JavaScript 极速入门</a>
    </h2>

    <footer class="article-time">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <polyline points="12 7 12 12 15 15" />
</svg>



        <time class="article-time--published">Nov 22, 2019</time>
    </footer></div>
</header>

    <section class="article-content">
    <p>欢迎来到 JavaScrip 极速入<del>坟</del> 门
首先，先把廖雪峰前四章看完 （就是到 <strong>面向对象编程</strong> 那一章</p>
<blockquote>
<p><a class="link" href="https://www.liaoxuefeng.com/wiki/1022910821149312"  target="_blank" rel="noopener"
    >JavaScript教程</a></p>
</blockquote>
<p>接着去看一下这个：</p>
<blockquote>
<p><a class="link" href="https://blog.frostmiku.com/archives/5/"  target="_blank" rel="noopener"
    >理解 JavaScript 的 Proto 和 Prototype</a></p>
</blockquote>
<p>然后就可以开始整活了：</p>
<p>this</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bar</span><span class="p">)</span> <span class="p">},</span>
  <span class="nx">bar</span><span class="o">:</span> <span class="mi">1</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>

<span class="nx">obj</span><span class="p">.</span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// 输出啥？
</span><span class="c1"></span><span class="nx">foo</span><span class="p">()</span> <span class="c1">// 输出啥？
</span></code></pre></div><p>array</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">]</span>
<span class="kd">function</span> <span class="nx">foo</span> <span class="p">(</span><span class="nx">list</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">foo</span><span class="p">(</span><span class="nx">bar</span><span class="p">);</span>
<span class="c1">// 现在 bar 里面是啥？
</span></code></pre></div><p>obj</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">foo</span><span class="p">(</span><span class="nx">buf</span><span class="p">){</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">buf</span> <span class="o">=</span> <span class="nx">buf</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">bar</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Uint8Array</span><span class="p">([</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">]);</span>
<span class="kd">var</span> <span class="nx">f</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">foo</span><span class="p">(</span><span class="nx">bar</span><span class="p">);</span>
<span class="nx">bar</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="mi">9</span><span class="p">;</span>
<span class="c1">// 现在 f.buf 里面是啥？
</span></code></pre></div><p>未完待续&hellip;</p>

</section>


    <footer class="article-footer">
    
    <section class="article-tags">
        
            <a href="/tags/javascript/">JavaScript</a>
        
    </section>


    
    <section class="article-copyright">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <path d="M14.5 9a3.5 4 0 1 0 0 6" />
</svg>



        <span>Licensed under CC BY-NC-SA 4.0</span>
    </section>
    </footer>

    
</article>

    <aside class="related-contents--wrapper">
    
    
        <h2 class="section-title">相关文章</h2>
        <div class="related-contents">
            <div class="flex article-list--tile">
                
                    
<article class="has-image">
    <a href="/archives/17/">
        
        
            <div class="article-image">
                <img src="/archives/17/fsm.c3f5bdb217bcb0fabdd5f523aeafd3b8_hu978e07731c4925ec022eae0a092b1149_264193_250x150_fill_q75_box_smart1.jpg" 
                        width="250" 
                        height="150" 
                        loading="lazy" 
                        data-key="17" 
                        data-hash="md5-w/W9she8sPq91fUjrq/TuA==">
                
            </div>
        

        <div class="article-details">
            <h2 class="article-title">使用 JavaScript 实现一个基于 FSM 的 http 请求头 parser</h2>
        </div>
    </a>
</article>
                
                    
<article class="has-image">
    <a href="/archives/36/">
        
        
            <div class="article-image">
                <img src="/archives/36/3.db9678b38accfdebd5aecc5a766b9a27_hu5f6040234dc4fded8a5d093800e3042d_106071_250x150_fill_q75_box_smart1.jpg" 
                        width="250" 
                        height="150" 
                        loading="lazy" 
                        data-key="36" 
                        data-hash="md5-25Z4s4rM/evVrsxadmuaJw==">
                
            </div>
        

        <div class="article-details">
            <h2 class="article-title">基于肢体运动的睡眠状态检测原理</h2>
        </div>
    </a>
</article>
                
                    
<article class="has-image">
    <a href="/archives/35/">
        
        
            <div class="article-image">
                <img src="/archives/35/after.945f6b0283370c0e5d12f832f1319bc9_hu23b7e7c62fd8951b5b31d4f97802b41e_155221_250x150_fill_q75_box_smart1.jpg" 
                        width="250" 
                        height="150" 
                        loading="lazy" 
                        data-key="35" 
                        data-hash="md5-lF9rAoM3DA5dEvgy8TGbyQ==">
                
            </div>
        

        <div class="article-details">
            <h2 class="article-title">仿手写文本生成</h2>
        </div>
    </a>
</article>
                
                    
<article class="has-image">
    <a href="/archives/34/">
        
        
            <div class="article-image">
                <img src="/archives/34/Game51.1823dcf7e012d3ec5ff280557f07dd9f_hu35b2e34c1174dbc23109259dd40822e7_105087_250x150_fill_q75_box_smart1.jpg" 
                        width="250" 
                        height="150" 
                        loading="lazy" 
                        data-key="34" 
                        data-hash="md5-GCPc9&#43;AS0&#43;xf8oBVfwfdnw==">
                
            </div>
        

        <div class="article-details">
            <h2 class="article-title">大革命，一种扑克卡牌游戏</h2>
        </div>
    </a>
</article>
                
                    
<article class="has-image">
    <a href="/archives/33/">
        
        
            <div class="article-image">
                <img src="/archives/33/_hu958d513eeefe5556a31d065479ecc5ac_14205_7bffa90d1e66ca9b8184fda08a99dc7e.jpg" 
                        width="250" 
                        height="150" 
                        loading="lazy" 
                        data-key="33" 
                        data-hash="md5-jq4GZk3fs&#43;jcbgAHVstwOw==">
                
            </div>
        

        <div class="article-details">
            <h2 class="article-title">浅谈邀请码的生成</h2>
        </div>
    </a>
</article>
                
            </div>
        </div>
    
</aside>

     
     
        
    <script src="https://utteranc.es/client.js" 
        repo="FrostMiKu/frostmiku.github.io"
        issue-term="title"
        
        label="Comment"
        
        crossorigin="anonymous"
        async
        >
</script>

<style>
    .utterances {
        max-width: unset;
    }
</style>

<script>
    function setUtterancesTheme(theme) {
        let utterances = document.querySelector('.utterances iframe');
        if (utterances) {
            utterances.contentWindow.postMessage(
                {
                    type: 'set-theme',
                    theme: `github-${theme}`
                },
                'https://utteranc.es'
            );
        }
    }

    addEventListener('message', event => {
        if (event.origin !== 'https://utteranc.es') return;
        setUtterancesTheme(document.documentElement.dataset.scheme)
    });

    window.addEventListener('onColorSchemeChange', (e) => {
        setUtterancesTheme(e.detail)
    })
</script>


    

    <footer class="site-footer">
    <section class="copyright">
        &copy; 
        
            2014 - 
        
        2022 StarWhisper
    </section>
    
    <section class="powerby">
        
            FrostMiKu <br/>
        Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="2.4.0">Stack</a></b> designed by <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
        <br />
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <span id="busuanzi_container_site_pv">本站总访问量 <span id="busuanzi_value_site_pv"></span> 次</span>
    </section>
</footer>

    
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    
    <div class="pswp__bg"></div>

    
    <div class="pswp__scroll-wrap">

        
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                
                
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo="crossorigin="anonymous"
                defer="true"
                >
            </script><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU="crossorigin="anonymous"
                defer="true"
                >
            </script><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css"integrity="sha256-c0uckgykQ9v5k&#43;IqViZOZKc47Jn7KQil4/MP3ySA3F8="crossorigin="anonymous"
            ><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css"integrity="sha256-SBLU4vv6CA6lHsZ1XyTdhyjJxCjPif/TRkjnsyGAGnE="crossorigin="anonymous"
            >

            </main>
    

        </div>
        <script 
                src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g="crossorigin="anonymous"
                defer="false"
                >
            </script><script type="text/javascript" src="/ts/main.js" defer></script>
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>

    </body>
</html>
